<template>
  <x-modal
    :animation="false"
    :width="716"
    visible
    padding="0"
    background="transparent"
    mask-background="#7F7F7F"
  >
    <view class="x-pay-cancel-pop">
      <view class="_content">
        <view class="_pic" @click="previewMedia">
          <x-image :src="pic" mode="heightFix" />
        </view>
        <view class="_dl">
          <view class="_dt">机会难得，现在付款</view>
          <view class="_dd">
            立减
            <text class="text">{{ amount }}</text>
            元
          </view>
        </view>
        <view class="_button" @click="onConfirm">
          <view class="_pay">立即支付</view>
          <view class="_time">
            <x-countdown :time="time" auto @finish="onCancel" @change="handleCountdownChange">
              <template v-if="countdownData">
                {{ countdownData.hour }}:{{ countdownData.minute }}:{{ countdownData.second }}后失效
              </template>
            </x-countdown>
          </view>
        </view>
      </view>
      <view class="_cancel_bottom" @click.stop="onCancel">
        <view class="_cancel_bottom_icon">
          <x-icon name="icon-025" color="#fff" size="30" />
        </view>
      </view>
    </view>
  </x-modal>
</template>

<script>
import XModal from '@/components/x-modal';
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
import XCountdown from '@/components/x-countdown';

export default {
  name: 'XPayCancelPop',
  components: {
    XModal,
    XImage,
    XIcon,
    XCountdown
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    pic: {
      type: String,
      default: ''
    },
    amount: {
      type: [String, Number],
      default: ''
    },
    time: {
      type: Number,
      default: 60 * 60 * 1000 - 1000
    }
  },
  data() {
    return {
      countdownData: null
    };
  },
  created() {},
  methods: {
    onCancel() {
      this.$emit('cancel');
      this.$emit('update:visible', false);
      this.$XTrack('onRepayCancelEvent', true);
    },
    onConfirm() {
      this.$emit('update:visible', false);
      this.$emit('confirm');
      this.$XTrack('onDiscountPayClick');
      // 振动
      wx.vibrateLong();
    },
    previewMedia() {
      uni.previewMedia({
        sources: [{
          url: this.pic,
          type: 'image'
        }]
      });
    },
    // 倒计时更新
    handleCountdownChange(res) {
      this.countdownData = res;
    }
  }
};
</script>

<style lang="scss" scoped>
  .x-pay-cancel-pop{
    ._content{ height: 870px; background: cdn('/images/pay-cancel-pop.png') no-repeat; background-size: cover; position: relative;}
    ._pic{
      width: 272px; height: 272px; overflow: hidden; border: 4px solid #FACD89; position: absolute; background-color: #fff; left: 50%; top: 170px; transform: translate3d(-50%, 0, 0); display: flex; justify-content: center;
    }
    ._dl{
      position: absolute; left: 50%; top: 550px; transform: translate3d(-50%, 0, 0); color: #fff; font-size: 48px; line-height: 1;
      ._dt{ white-space: nowrap; }
      ._dd{
        display: flex; align-items: center; justify-content: center; padding-top: 20px;
        .text{ color: #FFE401; padding: 0 10px; font-weight: bold; font-size: 60px;}
      }
    }
    ._button{
      position: absolute; width: 400px; height: 110px; left: 50%; bottom: 40px; transform: translate3d(-50%, 0, 0); text-align: center;
      ._pay{ color: #8A3916; font-size: 34px; font-weight: bold; padding-top: 10px;}
      ._time{ color: #F41D1D; font-size: 30px;}
    }
    ._cancel_bottom{
      display: flex; align-items: center; justify-content: center; padding: 20px;
      ._cancel_bottom_icon{ border: 4px solid #fff; border-radius: 50%; padding: 10px;}
    }
  }
</style>
